<template>
    <div class="bg-white flex-fill d-flex flex-column ">
        <div class="flex-fill p-1 messages">
            <div class="" v-for="(message,index) in messages" :key="index">
                <a class="text-secondary" href="#" @click.prevent="getTo(message.from)">{{message.from.nickname}}:</a>
                <span>{{message.content}}</span>
            </div>
        </div>
        <div v-if="!!from">
            <input type="text" v-model="content" class="form-control rounded-0" placeholder="聊个天呗..."
                   @keyup.enter="send"/>
        </div>
        <div v-else class="text-center border-top p-3">
            <a href="/login" class="btn btn-sm btn-info">请先登录账号</a>
        </div>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                client_id: '',
                messages: [],
                content: '',
                toId: '',
                live_id: window.live.id,
                from: window.user.id, //!!进行boolean转换
            }
        },
        mounted() {
            //页面初始化直播对象
            let socket = new WebSocket("wss://www.51fd111.com:8282");
            socket.onmessage = this.message


        },
        methods: {
            message({data}) {
                //解析字符串形式的json，
                // console.log(data)
                data = JSON.parse(data);
                switch (data.type) {
                    case 'init':
                        this.client_id = data.client_id
                        this.axios.post('/Edu/chat/init', this.$data)
                        break;
                    case 'kickout':
                        this.close(data.route)
                        break;
                    case 'speek':

                        this.$message.warning(data.content);
                        break;
                    default:
                        this.messages.push(data);
                        this.messages = this.messages.reverse().splice(0, 50).reverse()
                        this.$nextTick(_ => {
                            document.querySelector('.messages').scrollTo({top: 99999})
                        })
                }
            },
            send() {
                if (this.content.trim()) {
                    this.axios.post('/Edu/chat/send', this.$data).then(_ => {
                        this.content = ''
                        this.toId = ''
                    })
                }
            },
            close(url) {
                window.location.href = url;
            },
            getTo(from) {
                if (this.from == from.id) {
                    this.$message.warning('不能给自己发信息');
                    return
                }
                this.toId = from.id;
                this.content = `@${from.nickname}:`
            }
        }
    }
</script>

<style lang="scss" scoped>
    .messages {
        max-height: 500px;
        min-height: 200px;
        overflow-y: auto;
    }

    input {
        border-top: solid 2px #333;
    }
</style>
